<template>
  <div id="monitor">
    <!-- <div class="monitor-tree">
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :highlight-current="true"
      ></el-tree>
    </div> -->
    <div class="monitor-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="businessName" label="标题"></el-table-column>
        <el-table-column prop="nodeName" label="审批环节"></el-table-column>
        <el-table-column prop="startUser" label="发起人"></el-table-column>
        <el-table-column prop="approvalUser" label="审批人"></el-table-column>
        <el-table-column prop="remainTime"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.type === 1">菜单</span>
              <span v-if="scope.row.type === 2">按钮</span>
            </div>
            <!-- 状态开关 -->
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#C0C0C0" @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClickAdd(scope.row)" type="text" size="small">分配审批人</el-button>
            <el-button @click="handleClickDelete(scope.row)" type="text" size="small">清除审批人</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pull-right paddingTop">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="10"
          :total="this.total"
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </div>
    <div class="fixclear"></div>
    <el-dialog title="配置审批人员" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="addPersonRules" ref="form" label-width="120px">
        <el-form-item label="组织树" :label-width="addPersonFormLabelWidth">
          <div style="width:30%;float:left">
            <el-tree
              :data="NodeOrgList"
              :props="defaultProps"
              @node-click="handleNodeOrgClick"
              :highlight-current="true"
            ></el-tree>
          </div>
          <div style="width:65%;float:left;padding-left:5%">
            <el-table
              ref="tableNodePersonOrgData"
              :data="tableNodePersonOrgData"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column width="55">
                <template slot-scope="scope">
                  <el-radio class="radio" v-model="form.value" :label="scope.row.id"></el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="userName" label="人员名称" align="center"></el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addResources(form)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="delectMonitorPersonVisible" width="30%">
      <span>确定要清除审批人吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delectMonitorPersonVisible = false">取 消</el-button>
        <el-button type="primary" @click="delectMonitorPerson">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      node: {},
      task: {},
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      delectMonitorPersonVisible: false,
      dialogFormVisible: false,
      defaultProps: {
        children: "items",
        label: "name"
      },

      tableNodePersonData: [],
      personSelection: [],
      personVisible: false,
      addButtonPerson: false,
      form: {
        type: "",
        value: ""
      },
      personOptions: [
        { value: "0", label: "流程发起人" },
        { value: "4", label: "上级领导" },
        { value: "5", label: "普通用户" },
        { value: "6", label: "指定职位" }
      ],
      addPersonFormLabelWidth: "120px",
      radio: "",
      peopleRadio: "",
      orgTree: [],
      tableNodePersonOrgData: [],
      tableBodePersonPositionData: [],
      NodeOrgList: [],
      addPersonRules: {
        type: [
          { required: true, message: "请选择常用人员类型", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.getMonitorTree();
    this.getAllList();
  },
  methods: {
    getMonitorTree() {
      this.http.post("/api/flow/category/getCategoryTree").then(res => {
        let data = res.data.data;
        this.data = data;
      });
    },
    getAllList() {
      this.http
        .post("/api/process/monitor/taskList", {
          page: this.page,
          pageSize: this.pageSize
        })
        .then(res => {
          let data = res.data.data.records;
          let total = res.data.data.total;
          this.total = total;
          this.tableData = data;
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      let _this = this;
      if (this.node) {
        _this.handleNodeClick(this.node);
      } else {
        _this.getAllList();
      }
    },
    handleNodeClick(data) {
      this.node = data;
      this.http
        .post("/api/process/monitor/taskList", {
          categoryId: data.id,
          page: this.page,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.tableData = data.records;
          this.total = data.total;
        });
    },
    delectMonitorPerson() {
      this.http
        .post("/api/process/monitor/setAssignee", {
          taskId: this.task.taskId
        })
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("清除审批人成功！");
            this.handleNodeClick(this.node);
            this.delectMonitorPersonVisible = false;
          } else {
            this.$message.error("清除审批人失败！");
          }
        });
    },
    handleSelectionPersonChange(val) {
      this.personSelection = val;
    },
    addResources(formName) {
      this.addButtonPerson = false;
      this.http
        .post("/api/process/monitor/setAssignee", {
          taskId: this.task.taskId,
          userId: this.form.value
        })
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.handleNodeClick(this.node);
            this.dialogFormVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    handleNodeOrgClick(data) {
      console.log(data);
      this.http
        .post("/api/user/getUserList", {
          orgId: data.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.data.records;
          this.tableNodePersonOrgData = data;
        });
      this.http
        .post("/api/system/position/query", {
          Q_COLUMN: "AND_org_id_EQ",
          Q_VALUE: data.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.rows;
          this.tableBodePersonPositionData = data;
        });
    },
    handleClickAdd(data) {
      console.log(data);
      this.task = data;
      this.dialogFormVisible = true;
      this.http
        .post("/api/org/orgNodeList", {
          type: "user"
        })
        .then(res => {
          let data = res.data.data;
          this.NodeOrgList = data;
        });
    },
    handleClickDelete(data) {
      this.delectMonitorPersonVisible = true;
      this.task = data;
    },
    changeStatus(row){
      console.log(row.status);
    }
  }
};
</script>

<style lang="scss">
#monitor {
  padding: 0 15px;
  height: 100%;
  .paddingTop {
    padding-top: 15px;
  }
  .fixclear {
    clear: both;
  }
  .el-radio__label {
    display: none !important;
  }
  .monitor-tree {
    width: 15%;
    height: 100%;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    padding-right: 1%;
    float: left;
  }
  .monitor-table {
    .monitor-button {
      padding-bottom: 15px;
    }
    // width: 83%;
    //宽度修改
    width: 100%;
    padding-left: 1%;
    float: left;
  }
}
</style>
